import React, {useImperativeHandle, forwardRef, useEffect,useState} from 'react';
import {Input, Select,Collapse,Col, Row,Drawer,InputNumber} from "antd";
import {page} from "@/api/auth/user"
import {page as rolePage} from "@/api/auth/role"
import style from "./propertiesPanel.module.scss";
import TimeBuilder from "./timeBuilder.jsx";
const Search = Input.Search;
const UserTask = forwardRef((props, ref) => {
    const [element, setElement] = React.useState({});
    const [moder,setModer ] = React.useState(null);
    const [id,setId] = React.useState("");
    const [userList,setUserList] = React.useState([]);
    const [roleList,setRoleList] = useState([]);
    const [taskOpen,setTaskOpen] = React.useState(false);
    const [selectedUser,setSelectedUser] = React.useState("");
    const [selectedRole,setSelectedRole] = useState("")
    const [name,setName] = React.useState("");


    useEffect(() => {
        resetData();
    },[element])




    useEffect(() => {
        getUserList();
        getRoleList();
    },[])



    const getUserList = () => {
        let pageInput = {
            pageNum: 1,
            pageSize: 1000
        }
        page(pageInput).then((res) => {
            if(res.code  === 200) {
                let userList = res.data.map((item)=>{
                    return {
                        value:item.userInfoId,
                        label:item.trueName
                    }
                })
                setUserList(userList)
            }
        });
    }

    const getRoleList = () => {
        let pageInput = {
            pageNum: 1,
            pageSize: 1000
        }
        rolePage(pageInput).then((res) => {
            if(res.code  === 200) {
                let roleList = res.data.map((item)=>{
                    return {
                        value:item.id,
                        label:item.roleName
                    }
                })
                setRoleList(roleList)
            }
        });
    }




    const resetData = () => {
        if(element && element.businessObject) {
            let businessObject = element.businessObject
            setId(element.id)
            setName(element.businessObject.name)
            // 设置候选人
            let assignee = businessObject.get("activiti:assignee")
            if(assignee) {
                setSelectedUser(assignee)
            }else {
                setSelectedUser("")
            }

            // 设置候选组
            if(businessObject.get("activiti:candidateGroups")) {
                setSelectedRole(businessObject.get("activiti:candidateGroups"))
            }else {
                setSelectedRole("")
            }

        }
    }

    useImperativeHandle(ref, () => ({
        callback
    }));
    const callback = (element,moder) => {
        setElement(element)
        setModer(moder)
    }



    const onNameChange = (e) => {
        let val = e.target.value;
        setName(val)
        let data = {
            name: e.target.value
        }
        changeProp(data)
    }




    const changeProp = (data) => {
        const modeling = moder.get('modeling')
        modeling.updateProperties(element,data)
    }


    const setUser = (users)=>{
        setSelectedUser(users)
        let data = {
            "activiti:assignee":users
        }
        changeProp(data)
    }


    const setUserGroup = (group) => {
        setSelectedRole(group)
        let data = {
            "activiti:candidateGroups":group
        }
        changeProp(data)
    }







    return (<>
            <Drawer
                title={"到期时间"}
                width = {600}
                placement={'right'}
                closable={true}
                maskClosable={true}
                onClose={()=>{setTaskOpen(false)}}
                open={taskOpen}
                mask={true}
                push={{"distance" : 20}}
                key={'right'}
                zIndex={1003}
            >
            <TimeBuilder />
            </Drawer>
        <div className={props.type && props.type === 'bpmn:UserTask' ? style.show : style.hide}>
            <Collapse items={[
                {
                    key: 1,
                    label: "常规",
                    children: (
                        <div>
                            <Row justify={"center"} align={"middle"}>
                                <Col span={6}>ID:</Col>
                                <Col span={18}>
                                    <Input  value={id}  />
                                </Col>
                            </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>名称:</Col>
                                <Col span={18}>
                                    <Input  value={name}  onChange={onNameChange}  />
                                </Col>
                            </Row>
                        </div>
                    )
                },
                {
                    key: 2,
                    label: "用户任务",
                    children: (
                        <div>
                            <Row  justify={"center"} align={"middle"}>
                                <Col span={6}>候选人:</Col>
                                <Col span={18}>
                                     <Select
                                        allowClear
                                        style={{ width: '100%' }}
                                        placeholder="请选择"
                                        onChange={setUser}
                                        options={userList}
                                        value={selectedUser}
                                    />
                                </Col>
                            </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>候选角色:</Col>
                                <Col span={18}>
                                    <Select
                                        allowClear
                                        style={{ width: '100%' }}
                                        placeholder="请选择"
                                        onChange={setUserGroup}
                                        options={roleList}
                                        value={selectedRole}
                                    />
                                </Col>
                            </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>到期时间:</Col>
                                <Col span={18}>
                                    <Search
                                        onSearch={(value) => {setTaskOpen(true)}}
                                    />
                                </Col>
                            </Row>
                            <Row style={{marginTop:10}} justify={"center"} align={"middle"}>
                                <Col span={6}>优先级:</Col>
                                <Col span={18}>
                                    <InputNumber style={{width: 220}}
                                      min={0}
                                    />
                                </Col>
                            </Row>
                        </div>
                    )
                },
            ]} ghost={true} defaultActiveKey={1}>
            </Collapse>
        </div>
        </>
    );

})

export default UserTask;

